<template>
	<el-row class="main-box">
	    <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14" class="left-box">
			
			<el-row style="border-bottom: 0.0625rem #e6e6e6 solid;">
			    <el-col :xs="24" :sm="24" :md="24" :lg="4" :xl="4" >
					<el-upload
						class="avatar-uploader"
						action="http://www.wkserver.top:8080/userInfor/uploadImg"
						:show-file-list="false"
						:on-success="handleAvatarSuccess"
						:before-upload="beforeAvatarUpload"
						list-type="picture"
						:headers="token"
						>
						<img v-if="imageUrl" :src="imageUrl" class="avatar" />
						<el-icon v-else class="avatar-uploader-icon"><plus /></el-icon>
					</el-upload>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="20" :xl="20">
					<h5 style="color:rgb(110 108 117);">注册时间：{{ registerName }}</h5>
					 <el-form :inline="true" :model="formInline" class="demo-form-inline">
					    <el-form-item label="姓名">
					      <el-input v-model="userName"></el-input>
					    </el-form-item>
					    <el-form-item>
					      <el-button type="primary" @click="onSubmit">点击更改</el-button>
					    </el-form-item>
					  </el-form>
				</el-col>
			</el-row>
			
			<el-row :gutter="20">
			    <el-col :span="24" >
					<h5 style="color:rgb(110 108 117);">你可以在此设置修改你所处行业：</h5>
					<span style="font-size: 15px;">当前属于：{{ industry }}</span>
					<el-menu
					class="el-menu-demo"
					mode="horizontal"
					>							
						<el-sub-menu index="1">
							<template #title>点击切换行业</template>
							<el-sub-menu index="1-2">
								<template #title>第一产业</template>
									<el-sub-menu index="1-2-1">
										<template #title>农业</template>
										<el-menu-item index="1-2-1-1" @click.native="updateIndustry('农业：谷类')">谷类</el-menu-item>
										<el-menu-item index="1-2-1-2" @click.native="updateIndustry('农业：豆类')">豆类</el-menu-item>
										<el-menu-item index="1-2-1-3" @click.native="updateIndustry('农业：薯类')">薯类</el-menu-item>
										<el-menu-item index="1-2-1-4" @click.native="updateIndustry('农业：其他')">其他</el-menu-item>
									</el-sub-menu>
									<el-sub-menu index="1-2-2">
										<template #title>林业</template>
										<el-menu-item index="1-2-2-1" @click.native="updateIndustry('林业：树木类')">树木类</el-menu-item>
										<el-menu-item index="1-2-2-2" @click.native="updateIndustry('林业：盆景类')">盆景类</el-menu-item>
										<el-menu-item index="1-2-2-3" @click.native="updateIndustry('林业：鲜花类')">鲜花类</el-menu-item>
										<el-menu-item index="1-2-2-4" @click.native="updateIndustry('林业：其他')">其他</el-menu-item>
									</el-sub-menu>
									<el-sub-menu index="1-2-3">
										<template #title>畜牧业</template>
										<el-menu-item index="1-2-3-1" @click.native="updateIndustry('畜牧业：猪牛羊类')">猪牛羊类</el-menu-item>
										<el-menu-item index="1-2-3-2" @click.native="updateIndustry('畜牧业：家禽类')">家禽类</el-menu-item>
										<el-menu-item index="1-2-3-3" @click.native="updateIndustry('畜牧业：蛋类')">蛋类</el-menu-item>
										<el-menu-item index="1-2-3-4" @click.native="updateIndustry('畜牧业：奶类')">奶类</el-menu-item>
										<el-menu-item index="1-2-3-5" @click.native="updateIndustry('畜牧业：其他')">其他</el-menu-item>
									</el-sub-menu>
									<el-sub-menu index="1-2-4">
										<template #title>水产养殖业</template>
										<el-menu-item index="1-2-4-1" @click.native="updateIndustry('水产养殖业：鱼类')">鱼类</el-menu-item>
										<el-menu-item index="1-2-4-2" @click.native="updateIndustry('水产养殖业：虾类')">虾类</el-menu-item>
										<el-menu-item index="1-2-4-3" @click.native="updateIndustry('水产养殖业：贝类')">贝类</el-menu-item>
										<el-menu-item index="1-2-4-4" @click.native="updateIndustry('水产养殖业：其他')">其他</el-menu-item>
									</el-sub-menu>
									<el-menu-item index="1-2-5" @click.native="updateIndustry('第一产业：其他')">其他</el-menu-item>
							</el-sub-menu>
						
							<el-sub-menu index="1-3">
								<template #title>第二产业</template>
								<el-sub-menu index="1-3-1">
									<template #title>矿业</template>
									<el-menu-item index="1-3-1-1" @click.native="updateIndustry('矿业：贵金属类')">贵金属类</el-menu-item>
									<el-menu-item index="1-3-1-2" @click.native="updateIndustry('矿业：稀土类')">稀土类</el-menu-item>
									<el-menu-item index="1-3-1-3" @click.native="updateIndustry('矿业：煤炭类')">煤炭类</el-menu-item>
									<el-menu-item index="1-3-1-5" @click.native="updateIndustry('矿业：其他')">其他</el-menu-item>
								</el-sub-menu>
								<el-sub-menu index="1-3-2">
									<template #title>制造业</template>
									<el-menu-item index="1-3-2-1" @click.native="updateIndustry('制造业：食品加工类')">食品加工类</el-menu-item>
									<el-menu-item index="1-3-2-2" @click.native="updateIndustry('制造业：纺织服装类')">纺织服装类</el-menu-item>
									<el-menu-item index="1-3-2-3" @click.native="updateIndustry('制造业：材料制造类')">材料制造类</el-menu-item>
									<el-menu-item index="1-3-2-3" @click.native="updateIndustry('制造业：化工制造类')">化工制造类</el-menu-item>
									<el-menu-item index="1-3-2-3" @click.native="updateIndustry('制造业：机器制造类')">机器制造类</el-menu-item>
									<el-menu-item index="1-3-2-4" @click.native="updateIndustry('制造业：其他')">其他</el-menu-item>
								</el-sub-menu>
								<el-sub-menu index="1-3-3">
									<template #title>建筑业</template>
									<el-menu-item index="1-3-3-1" @click.native="updateIndustry('建筑业：楼盘类')">楼盘类</el-menu-item>
									<el-menu-item index="1-3-3-2" @click.native="updateIndustry('建筑业：装修类')">装修类</el-menu-item>
									<el-menu-item index="1-3-3-3" @click.native="updateIndustry('建筑业：建材类')">建材类</el-menu-item>
									<el-menu-item index="1-3-3-4" @click.native="updateIndustry('建筑业：其他')">其他</el-menu-item>
								</el-sub-menu>
								<el-menu-item index="1-3-4" @click.native="updateIndustry('第二产业：其他')">其他</el-menu-item>
							</el-sub-menu>
						
							<el-sub-menu index="1-4">
								<template #title>第三产业</template>
								<el-sub-menu index="1-4-1">
									<template #title>金融</template>
									<el-menu-item index="1-4-1-1" @click.native="updateIndustry('金融：证券类')">证券类</el-menu-item>
									<el-menu-item index="1-4-1-2" @click.native="updateIndustry('金融：信贷类')">信贷类</el-menu-item>
									<el-menu-item index="1-4-1-3" @click.native="updateIndustry('金融：审计类')">审计类</el-menu-item>
									<el-menu-item index="1-4-1-5" @click.native="updateIndustry('金融：其他')">其他</el-menu-item>
								</el-sub-menu>
								<el-sub-menu index="1-4-2">
									<template #title>餐饮业</template>
									<el-menu-item index="1-4-2-1" @click.native="updateIndustry('餐饮业：饮品类')">饮品类</el-menu-item>
									<el-menu-item index="1-4-2-2" @click.native="updateIndustry('餐饮业：特色菜类')">特色菜类</el-menu-item>
									<el-menu-item index="1-4-2-3" @click.native="updateIndustry('餐饮业：风味小吃类')">风味小吃类</el-menu-item>
									<el-menu-item index="1-4-2-4" @click.native="updateIndustry('餐饮业：西餐类')">西餐类</el-menu-item>
									<el-menu-item index="1-4-2-5" @click.native="updateIndustry('餐饮业：火锅类')">火锅类</el-menu-item>
									<el-menu-item index="1-4-2-6" @click.native="updateIndustry('餐饮业：其他')">其他</el-menu-item>
								</el-sub-menu>
								<el-sub-menu index="1-4-3">
									<template #title>信息技术</template>
									<el-menu-item index="1-4-3-1" @click.native="updateIndustry('信息技术：WEB类')">WEB类</el-menu-item>
									<el-menu-item index="1-4-3-2" @click.native="updateIndustry('信息技术：手机APP类')">手机APP类</el-menu-item>
									<el-menu-item index="1-4-3-3" @click.native="updateIndustry('信息技术：物联网类')">物联网类</el-menu-item>
									<el-menu-item index="1-4-3-4" @click.native="updateIndustry('信息技术：云计算类')">云计算类</el-menu-item>
									<el-menu-item index="1-4-3-5" @click.native="updateIndustry('信息技术：人工智能类')">人工智能类</el-menu-item>
									<el-menu-item index="1-4-3-6" @click.native="updateIndustry('信息技术：其他')">其他</el-menu-item>
								</el-sub-menu>
								<el-sub-menu index="1-4-4">
									<template #title>批发零售</template>
									<el-menu-item index="1-4-4-1" @click.native="updateIndustry('批发零售：烟酒类')">烟酒类</el-menu-item>
									<el-menu-item index="1-4-4-2" @click.native="updateIndustry('批发零售：食品类')">食品类</el-menu-item>
									<el-menu-item index="1-4-4-3" @click.native="updateIndustry('批发零售：服饰类')">服饰类</el-menu-item>
									<el-menu-item index="1-4-4-3" @click.native="updateIndustry('批发零售：洗护类')">洗护类</el-menu-item>
									<el-menu-item index="1-4-4-4" @click.native="updateIndustry('批发零售：其他')">其他</el-menu-item>
								</el-sub-menu>
								<el-sub-menu index="1-4-5">
									<template #title>教育</template>
									<el-menu-item index="1-4-5-1" @click.native="updateIndustry('教育：主科类')">主科类</el-menu-item>
									<el-menu-item index="1-4-5-2" @click.native="updateIndustry('教育：副科类')">副科类</el-menu-item>
									<el-menu-item index="1-4-5-3" @click.native="updateIndustry('教育：婴幼儿类')">婴幼儿类</el-menu-item>
									<el-menu-item index="1-4-5-4" @click.native="updateIndustry('教育：学习用品类')">学习用品类</el-menu-item>
									<el-menu-item index="1-4-5-4" @click.native="updateIndustry('教育：培训类')">培训类</el-menu-item>
									<el-menu-item index="1-4-5-5" @click.native="updateIndustry('教育：其他')">其他</el-menu-item>
								</el-sub-menu>
								<el-menu-item index="1-4-6" @click.native="updateIndustry('第三产业：其他')">其他</el-menu-item>
							</el-sub-menu>
						</el-sub-menu>						
					</el-menu>
				</el-col>
			</el-row>
			
			<el-row :gutter="20" style="border-bottom: 0.0625rem #e6e6e6 solid;">
			    <el-col :span="24" >
					<h5 style="color:rgb(110 108 117);">你可以在此设置修改登录密码：</h5>
					<el-form   class="demo-form-inline" :model="updatePasswordForm">
						<p>账户：{{ userId }}	</p>
					    <el-form-item label="原密码" >
							<el-input style="width: 220px;" v-model="updatePasswordForm.olderPassWord"></el-input>
					    </el-form-item>
					    
						<el-form-item label="新密码" >
							<el-input style="width: 220px;" v-model="updatePasswordForm.newPassWord"></el-input>
					    </el-form-item>
					    
						<el-form-item  >
					      <el-button type="primary" style="margin-left: 130px;" @click="onSubmitPassword" >提交</el-button>
					    </el-form-item>
					  </el-form>
				</el-col>
			</el-row>
		</el-col>
		<el-col :xs="0" :sm="0" :md="7" :lg="7" :xl="7" class="right-box">
		</el-col>
	</el-row>
	
</template>

<script lang="ts" setup>
	import { ref,reactive } from 'vue'
	import { ElMessage,ElMessageBox } from 'element-plus'
	import { Plus } from '@element-plus/icons-vue'
	import type {
	  UploadFile,
	  ElUploadProgressEvent,
	  ElFile,
	} from 'element-plus/es/components/upload/src/upload.type'
	import { getUserName } from "../../http/header.js"
	import { updateUserName,getRegisterName,getIndustry,updatePassword,updateIndustryPost} from "../../http/settings.js"
	
	//上传头像
	const token = {"userId":JSON.parse(sessionStorage.getItem("access-admin")).userId}
	const imageUrl = ref('')
	const handleAvatarSuccess = (res: ElUploadProgressEvent, file: UploadFile) => {
		ElMessage.success('保存头像成功')
		imageUrl.value = URL.createObjectURL(file.raw)
	}
	const beforeAvatarUpload = (file: ElFile) => {
	  const isJPG = file.type === 'image/jpeg'
	  const isLt2M = file.size / 1024 / 1024 < 2

	  if (!isJPG) {
		ElMessage.error('请传输一个JPG格式的照片!')
	  }
	  if (!isLt2M) {
		ElMessage.error('图片大小不得大于 2MB!')
	  }
	  return isJPG && isLt2M
	}
	
		
	// 选择行业
	const updateIndustry = (industryName) => {
	   ElMessageBox.confirm(
	      '你确定要修改你所录入的行业信息为'+industryName+"么？",
	      '警告',
	      {
	        confirmButtonText: '确定',
	        cancelButtonText: '取消',
	        type: 'warning',
	      }
	    )
	      .then(() => {
			//修改请求
			updateIndustryPost(industryName)
	        ElMessage({
	          type: 'success',
	          message: '修改成功',
	        })
			return
	      })
	      .catch(() => {
	        ElMessage({
	          type: 'info',
	          message: '已取消',
	        })
	      })
	}
	
	//接收姓名
	const userName = ref("")
	getUserName().then(res=>{
		userName.value = res.data.userName
	})
	//接收注册时间
	const registerName = ref("")
	getRegisterName().then(res=>{
		registerName.value = res.data
	})
	//接收账号信息
	const userId = JSON.parse(sessionStorage.getItem("access-admin")).userId 
	
	//接收所处行业
	const industry = ref("")
	getIndustry().then(res=>{
		industry.value = res.data
	})

	//修改姓名
	const onSubmit= () =>{
		if(!userName){
			ElMessage.error("姓名不能为空")
			return;
		}
		updateUserName(userName.value).then(res=>{
			ElMessage.success("修改成功")
		})	
	}	
	//修改行业
	//修改密码
	let updatePasswordForm = reactive({
		olderPassWord : '',
		newPassWord : ''
	})
		
	const onSubmitPassword =() =>{
		if(!updatePasswordForm.olderPassWord || !updatePasswordForm.newPassWord){
			ElMessage.error("原密码新密码不能为空")
			return
		}
		if(updatePasswordForm.olderPassWord.length>16 || updatePasswordForm.newPassWord.length>16){
			ElMessage.error("原密码新密码都小于16位")
			return
		}
		updatePassword(updatePasswordForm).then(res=>{
			if(res.data){
				ElMessage.success("修改成功")
			}else{
				ElMessage.error("请输入正确的密码")
			}
		})
	}
</script>

<style scoped="scoped">
	.left-box{
		height: 100%;		
	}
	.right-box{
		height: 100%;		
	}
	.main-box{
		height: 100%;
	}

	:deep(.avatar-uploader-icon){
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	:deep(.avatar-uploader-icon:hover){
		border-color: #409eff;
	}

	.avatar-uploader-icon {
	  font-size: 28px;
	  color: #8c939d;
	  width: 100px;
	  height: 100px;
	  text-align: center;
	}
	.avatar {
	  width: 178px;
	  height: 178px;
	  display: block;
	}
</style>
